<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 relative overflow-hidden">
    <!-- 背景装饰 -->
    <div class="absolute inset-0 pointer-events-none">
      <div class="absolute w-48 h-48 rounded-full bg-white bg-opacity-10 top-10 left-10 animate-float"></div>
      <div class="absolute w-36 h-36 rounded-full bg-white bg-opacity-10 top-60 right-15 animate-float animation-delay-2s"></div>
      <div class="absolute w-24 h-24 rounded-full bg-white bg-opacity-10 bottom-20 left-20 animate-float animation-delay-4s"></div>
    </div>

    <!-- 登录卡片 -->
    <div class="bg-white bg-opacity-95 backdrop-blur-md rounded-2xl p-10 w-full max-w-md shadow-2xl border border-white border-opacity-20">
      <!-- Logo区域 -->
      <div class="text-center mb-8">
        <div class="mb-4">
          <div class="i-mdi:school text-5xl text-blue-500"></div>
        </div>
        <h1 class="text-2xl font-semibold text-gray-800 mb-2">学生成绩分析系统</h1>
        <p class="text-sm text-gray-500">欢迎回来，请登录您的账户</p>
      </div>

      <!-- 登录表单 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="mb-6" @submit.prevent="handleLogin">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名" size="large" prefix-icon="User" clearable />
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" size="large" prefix-icon="Lock" show-password clearable />
        </el-form-item>

        <div class="flex justify-between items-center mb-6">
          <el-checkbox v-model="rememberMe">记住我</el-checkbox>
          <a href="#" class="text-blue-500 text-sm hover:underline">忘记密码？</a>
        </div>

        <el-form-item>
          <el-button type="primary" size="large"
            class="w-full h-12 text-base font-medium rounded-lg bg-gradient-to-r from-blue-500 to-blue-400 border-none transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
            :loading="loading" @click="handleLogin">
            {{ loading ? '登录中...' : '登录' }}
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 其他登录方式 -->
      <div class="mb-6">
        <div class="relative text-center my-5">
          <div class="absolute top-1/2 left-0 right-0 h-px bg-gray-200"></div>
          <span class="bg-white bg-opacity-95 px-4 text-gray-500 text-sm">或使用以下方式登录</span>
        </div>
        <div class="flex gap-3 mt-4">
          <el-button
            class="flex-1 h-10 rounded-lg text-sm border border-gray-200 bg-white text-gray-800 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md hover:border-green-500 hover:text-green-500">
            <div class="i-mdi:wechat text-base mr-1"></div>
            微信登录
          </el-button>
          <el-button
            class="flex-1 h-10 rounded-lg text-sm border border-gray-200 bg-white text-gray-800 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500 hover:text-blue-500">
            <div class="i-mdi:qq text-base mr-1"></div>
            QQ登录
          </el-button>
        </div>
      </div>

      <!-- 注册链接 -->
      <div class="text-center text-sm text-gray-500">
        <span>还没有账户？</span>
        <a href="#" class="text-blue-500 font-medium hover:underline" @click="goToRegister">立即注册</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const loginFormRef = ref()
const loading = ref(false)
const rememberMe = ref(false)

// 登录表单数据
const loginForm = reactive({
  username: '',
  password: ''
})

// 表单验证规则
const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

// 处理登录
const handleLogin = async () => {
  if (!loginFormRef.value) return

  try {
    await loginFormRef.value.validate()
    loading.value = true

    // 模拟登录请求
    await new Promise(resolve => setTimeout(resolve, 1500))

    // 登录成功，设置认证状态
    localStorage.setItem('isAuthenticated', 'true')
    localStorage.setItem('userInfo', JSON.stringify({
      username: loginForm.username,
      rememberMe: rememberMe.value
    }))

    ElMessage.success('登录成功！')
    router.push('/dashboard')
  } catch (error) {
    console.error('登录失败:', error)
    ElMessage.error('登录失败，请检查用户名和密码')
  } finally {
    loading.value = false
  }
}

// 跳转到注册页面
const goToRegister = () => {
  ElMessage.info('注册功能开发中...')
}
</script>

<style lang="scss" scoped>
/* 只保留无法用UnoCSS实现的动画效果 */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animation-delay-2s {
  animation-delay: 2s;
}

.animation-delay-4s {
  animation-delay: 4s;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-input__wrapper) {
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border: 1px solid rgb(229 231 235);
  transition: all 0.3s;
}

:deep(.el-input__wrapper:hover) {
  border-color: rgb(59 130 246);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

:deep(.el-input__wrapper.is-focus) {
  border-color: rgb(59 130 246);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

:deep(.el-checkbox__label) {
  color: rgb(31 41 55);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-card {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    padding: 2rem;
  }

  .social-login {
    flex-direction: column;
  }

  .title {
    font-size: 1.25rem;
  }
}
</style> 